<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view视图-->
<div id="app">
    <h3>{{ count }}</h3>
    <button @click="changeCount">+1</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    <!--ViewModel实例-->
    const app = Vue.createApp({
        data() { //model数据
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count += 1
            }
        }
    })
    app.mount("#app")
    /*
    MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
    Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷
    **Vue中mvvm的体现**：对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新
    在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理
    MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
    > M：model数据
    > V：view视图
    > VM：ViewModel Vue的实例
    */
</script>
</body>
</html>